<template>
  <div class="monith-area">
    <div id="LMap" class="monith-map" style="width:100%;height: 600px;"></div>
    <div class="full-screen full-screen_full" @click="fullScreen">全屏显示</div>
    <div class="full-screen full-screen_normal" @click="cancelFullScreen">退出全屏</div>

    <!-- 模式菜单 -->
    <div class="monith-nav draggable">
        <div class="uav-list-btn active"><i class="uav-icon"></i>无人机列表</div>
        <!-- <div class="uav-mount"><i class="mount-icon"></i>无人机挂载</div> -->
        <div class="view-model">画面模式
            <i class="model-half-icon" :class="{active:screenActive.screen1}" @click="showVideo(1)"></i><!--
            --><i class="model-one-icon" :class="{active:screenActive.screen2}" @click="showVideo(2)"></i><!--
            --><i class="model-four-icon" :class="{active:screenActive.screen3}" @click="showVideo(3)"></i><!--
            --><i class="model-nine-icon" :class="{active:screenActive.screen4}" @click="showVideo(4)"></i>            
        </div>        
    </div>

    <!-- 运行中无人机列表 -->
    <div class="uav-area panel-group draggable" style="display: block;" id="accordionOne">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="collapse-toggle" data-toggle="collapse" data-parent="#accordionOne"></a>
                <h4 class="panel-title"><i class="uav-icon"></i>无人机列表</h4>
                <i id="closeUavList" class="close-icon"></i>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
                <div class="panel-body">
                    <ul id="uavList" class="list-group">
                         <li class="list-group-item" v-for="(item,k) in onlines" :key="k">
                            <div class="list-group-item-heading">
                                <span class="list-group-item-heading-title"><span class="uav-name">{{item.device.model}}</span><br/>（<span>{{item.order.name}}</span>）</span>
                                <i class="mount-icon"></i>
                                <i class="video-icon"></i>
                                <i class="path-icon"></i>
                                <i class="position-icon"></i>
                            </div>
                            <ul class="list-group-item-body clearfix">
                                <li>高度：<span>0</span>m</li>
                                <li>速度：<span>0</span>m/s</li>
                                <li>爬升率：<span>0</span>m/s</li>
                                <li>电压：<span>0</span>v</li>
                                <li>经度：<span>0</span></li>
                                <li>纬度：<span>0</span></li>
                            </ul>
                        </li> 
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <!-- 无人机视频列表 -->
    <div class="video-area draggable" v-if="showvideo" :style="{display:'block',width:screenSize.width,height: screenSize.height}">
        <div class="video-wrap empty" v-for="(v,k) in videoData" :style="{display:'block',width:videoSize.width,height: videoSize.height}">
            <div class="video-name-wrap">
                <span class="video-name">{{v.name}}</span>
                <i class="close-icon"></i>
            </div>
            <video :id="'video'+k" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" data-setup='{ "html5" : { "nativeTextTracks" : false } }'>
                 <source src="rtmp://live.hkstv.hk.lxdns.com/live/hks" type="rtmp/flv">  
                <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" >supports HTML5 video</a></p>
            </video>
        </div> 
        
    </div>

    <!-- 挂载控制 -->
    <div class="mount-area panel-group draggable" id="accordionTwo">
        <div class="panel panel-default">
            <div class="panel-heading">
                <a class="collapse-toggle" data-toggle="collapse" data-parent="#accordionTwo" href="#collapseTwo"></a>
                <h4 class="panel-title"><i class="mount-icon"></i><span class="mount-name"></span>挂载</h4>
                <i id="closeMountControl" class="close-icon"></i>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse in">
                <div class="panel-body">
                    <div class="mount-parameter-wrap">
                        <div class="mount-select-wrap">
                            <span>挂载设备：</span>
                            <div class="select-wrap">
                                <button type="button" class="select-btn btn btn-default">
                                    <span class="filter-option pull-left">多倍变焦相机</span>&nbsp;<span class="bs-caret"><span class="caret"></span></span>
                                </button>
                                <ul class="select-menu">
                                    <li data-original-index="0" class="selected">多倍变焦相机</li>
                                    <li data-original-index="1" class="selected">123</li>
                                    <li data-original-index="2" class="selected">多倍变焦相机</li>
                                    <li data-original-index="3" class="selected">123</li>
                                </ul>
                            </div>
                        </div>
                        <ul class="mount-parameter-list clearfix">
                            <li>俯仰角度：</li>
                            <li>偏航角度：</li>
                            <li>横滚角度：</li>
                            <li>放大倍数：</li>
                        </ul>
                    </div>
                    <div class="mount-control-area clearfix">
                        <div class="mount-control-left">
                            <div class="control-model">
                                <span>锁定</span><!--
                                --><span class="active">控制</span><!--
                                --><span>重置</span>
                            </div>
                            <div class="control-direction">
                                <div class="direction-up"></div>
                                <div class="direction-down"></div>
                                <div class="direction-left"></div>
                                <div class="direction-right"></div>                    
                            </div>
                        </div>
                        <div class="mount-control-right">
                            <div class="control-zoom clearfix">
                                <div class="control-zoom-title">变焦</div>
                                <div class="zoom-in">
                                    <i class="zoom-in-icon"></i>
                                    <span>放大</span> 
                                </div>
                                <div class="zoom-out">
                                    <i class="zoom-out-icon"></i>
                                    <span>缩小</span> 
                                </div>   
                            </div>
                            <div class="control-camera clearfix">
                                <div class="camera-photo">
                                    <i class="camera-photo-icon"></i>
                                    <span>拍照</span> 
                                </div>
                                <div class="camera-video">
                                    <i class="camera-video-icon"></i>
                                    <span>录像</span> 
                                </div>                 
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>




</div>
</template>

<script>


export default {
  data() {
    return {
      onlines:[],
      showvideo:false,
      screenActive:{screen1:false,screen2:false,screen3:false,screen4:false},
      screenSize:{width:'100%',height:'100%'},
      videoSize:{width:'100%',height:'100%'},
      videoData:[],
      layers: L.layerGroup([
             L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}', {
                 subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
             }),
             L.tileLayer('http://t{s}.tianditu.cn/DataServer?T=cva_w&X={x}&Y={y}&L={z}', {
                subdomains: ['0', '1', '2', '3', '4', '5', '6', '7']
             })
         ])
    }
  },

  mounted() {
        let map = L.map('LMap', {
        //[41.0550329133, 83.4920930027]
        center: [41.37062534198904, 83.63204956054689],
        zoom: 21,
        maxZoom: 21,
        minZoom: 15,
        zoomControl: false,
        // layers: [streetLayers[Object.keys(streetLayers)[0]]]
        layers: [this.layers]

    });
    this.getOnline()
  },
  beforeDestroy() {},
  methods: {
    getOnline(){
        this.http('get','task/online').then(res=>{
            this.onlines = res.data
        })
    },
    fullScreen(){//全屏
        var de = document.documentElement;
        if (de.requestFullscreen) {
            de.requestFullscreen();
        } else if (de.mozRequestFullScreen) {
            de.mozRequestFullScreen();
        } else if (de.webkitRequestFullScreen) {
            de.webkitRequestFullScreen();
        }
    },
    cancelFullScreen(){//退出全屏
        var de = document;
        if (de.exitFullscreen) {
            de.exitFullscreen();
        } else if (de.mozCancelFullScreen) {
         de.mozCancelFullScreen();
        } else if (de.webkitCancelFullScreen) {
            de.webkitCancelFullScreen();
        }
    },
    showVideo(type){
        this.showvideo = true
        this.screenActive={screen1:false,screen2:false,screen3:false,screen4:false}
        this.screenActive['screen'+type] = true
        let num
        switch(type){
            case 1:
                num = 1
                this.screenSize = {width:'40%',height:'40%'}
                this.videoSize = {width:'100%',height:'100%'}
            break;
            case 2:
                num = 1
                this.screenSize = {width:'100%',height:'100%'}
                this.videoSize = {width:'100%',height:'100%'}
            break;
            case 3:
                num = 4
                this.screenSize = {width:'100%',height:'100%'}
                this.videoSize = {width:'50%',height:'50%'}
            break;
            case 4:
                num = 9
                this.screenSize = {width:'100%',height:'100%'}
                this.videoSize = {width:'33%',height:'33%'}
            break;
        }
        this.videoData = []
        for(let i = 0 ; i < num ; i ++){
            this.videoData.push({name:'未选择无人机'})
        }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
$uavlist-width: 380px;

.leaflet-control-attribution {
    display: none;
}

.content-wrapper-inner:-webkit-full-screen {
    width: 100%;
    height: 100%;

}

.monith-area {
    position: relative;
    .full-screen{
        display: inline-block;
        cursor: pointer;
        color:#4c6072;
        background:#ffffff;
        border:1px solid #979797;
        border-radius:4px;
        width:112px;
        height:36px;
        line-height: 36px;
        text-align: center;
        margin-top: 10px;
    }
    .full-screen:hover{
        border-color: #2196F3;
    }
    .monith-nav {
        position: absolute;
        top: 10px;
        right: 120px;
        z-index: 1100;
        padding: 10px 0;
        background:#3e495b;
        border-radius: 4px;
        font-size:16px;
        color:#afbdd1;
        .uav-list-btn {
            display: inline-block;
            margin: 0 12px;
            height: 32px;
            line-height: 32px;
            vertical-align: top;
            cursor: pointer;
            &.active {
                color: #64b9fc;
                .uav-icon {
                    background: url(../../assets/images/video/uav-icon.png) no-repeat center;
                    background-size: contain;
                }
            }
            .uav-icon {
                display: inline-block;
                width: 24px;
                height: 32px;
                margin: 0 3px;
                background: url(../../assets/images/video/uav-icon-no.png) no-repeat center;
                background-size: contain;
                vertical-align: top;
            }
        }
        .view-model {
            display: inline-block;
            margin: 0 12px;
            height: 32px;
            line-height: 32px;
            vertical-align: top;
            .model-half-icon,.model-one-icon,.model-four-icon,.model-nine-icon {
                display: inline-block;
                width: 32px;
                height: 32px;
                margin: 0 5px;
                vertical-align: top;
                cursor: pointer;
            }
            .model-half-icon {
                background: url(../../assets/images/video/half-screen-no.png) no-repeat center;
                background-size: contain;
                &.active {
                    background: url(../../assets/images/video/half-screen.png) no-repeat center;
                    background-size: contain;
                }
            }
            .model-one-icon {
                background: url(../../assets/images/video/one-screen-no.png) no-repeat center;
                background-size: contain;
                &.active {
                    background: url(../../assets/images/video/one-screen.png) no-repeat center;
                    background-size: contain;
                }
            }
            .model-four-icon {
                background: url(../../assets/images/video/four-screen-no.png) no-repeat center;
                background-size: contain;
                &.active {
                    background: url(../../assets/images/video/four-screen.png) no-repeat center;
                    background-size: contain;
                }
            }
            .model-nine-icon {
                background: url(../../assets/images/video/nine-screen-no.png) no-repeat center;
                background-size: contain;
                &.active {
                    background: url(../../assets/images/video/nine-screen.png) no-repeat center;
                    background-size: contain;
                }
            }
        }
    }
    .panel-group {
        position: absolute;
        width: $uavlist-width;  
        &.uav-area {
            display: none;
            z-index: 1012;
            top: 0;
            left: 0;
            .panel-collapse {
                // min-height: 132px;
                max-height: 328px;
            }
        }  
        &.mount-area {
            display: none;
            z-index: 1010;
            top: 100%;
            left: 0;
            margin-top: -424px;
        }  
        .panel {
            border: none;
            background: rgba(0, 0, 0, 0.8);
            .panel-heading {
                position: relative;
                padding: 16px;
                color:#9bacbe;
                background: #3e495b;
                .close-icon {
                    position: absolute;
                    top: 16px;
                    right: 16px;
                    width: 24px;
                    height: 24px;
                    background: url(../../assets/images/video/close-icon.png) no-repeat center;
                    background-size: contain;
                    cursor: pointer;
                }
                .panel-title {
                    line-height: 24px;
                    text-align: center;
                    .uav-icon {
                        display: inline-block;
                        width: 24px;
                        height: 24px;
                        margin: 0 3px;
                        background: url(../../assets/images/video/uav-icon-no.png) no-repeat center;
                        background-size: contain;
                        vertical-align: top;
                    }
                    .mount-icon {
                        display: inline-block;
                        width: 24px;
                        height: 24px;
                        margin: 0 3px;
                        vertical-align: top;
                        background: url(../../assets/images/video/mount-icon-no.png) no-repeat center;
                        background-size: contain;
                    }
                }
                .collapse-toggle {
                    position: absolute;
                    top: 16px;
                    left: 16px;
                    width: 24px;
                    height: 24px;
                    background: #3e495b url(../../assets/images/video/dropdown-toggle.png) no-repeat center;
                    background-size: contain;
                    &.collapsed {
                        background: #3e495b url(../../assets/images/video/pullup-toggle.png) no-repeat center;
                        background-size: contain; 
                    }
                }
    
            }
            .panel-collapse {
                .panel-body {
                    padding: 0;
                    border-top: none; 
                    .list-group {
                        margin: 0;
                        .list-group-item {
                            padding: 0;
                            border-left: none; 
                            border-right: none; 
                            border-bottom: none; 
                            border-top-color: #333;
                            background: none;
                            border-radius: 0; 
                            &.active {
                                border-top-color: #333;
                                .list-group-item-heading {
                                    color:#afbdd1;
                                    background:#374a6b;                             
                                }
                            }
                            .list-group-item-heading {
                                margin: 0;
                                padding: 12px;
                                line-height: 32px;
                                font-size: 16px;
                                color:#9bacbe;
                                background:#3e495b;
                                transition: all 0.3s;
                                .list-group-item-heading-title {
                                    cursor: pointer;
                                    &:hover {
                                        color: #64b9fc;
                                    }
                                }
                                .position-icon,.path-icon,.path-icon,.video-icon,.mount-icon {
                                    float: right;
                                    width: 32px;
                                    height: 32px;
                                    margin: 0 3px;
                                    cursor: pointer;
                                }
                                .position-icon {
                                    background: url(../../assets/images/video/position-icon-no.png) no-repeat center;
                                    background-size: contain; 
                                    &.active {
                                        background: url(../../assets/images/video/position-icon.png) no-repeat center;
                                        background-size: contain;
                                    }
                                }
                                .path-icon {
                                    background: url(../../assets/images/video/path-icon-no.png) no-repeat center;
                                    background-size: contain; 
                                    &.active {
                                        background: url(../../assets/images/video/path-icon.png) no-repeat center;
                                        background-size: contain;
                                    }
                                }
                                .video-icon {
                                    background: url(../../assets/images/video/video-icon-no.png) no-repeat center;
                                    background-size: contain; 
                                    &.active {
                                        background: url(../../assets/images/video/video-icon.png) no-repeat center;
                                        background-size: contain;
                                    }
                                    &.disabled {
                                        background: url(../../assets/images/video/video-icon-dis.png) no-repeat center;
                                        background-size: contain;
                                    }
                                }
                                .mount-icon{
                                    background: url(../../assets/images/video/mount-icon-no.png) no-repeat center;
                                    background-size: contain;
                                    &.active {
                                        background: url(../../assets/images/video/mount-icon.png) no-repeat center;
                                        background-size: contain;
                                    }
                                    &.disabled {
                                        background: url(../../assets/images/video/mount-icon-dis.png) no-repeat center;
                                        background-size: contain;
                                    }
                                }
                            }
                            .list-group-item-body {
                                display: none;
                                padding: 30px 0;
                                li {
                                    list-style: none;
                                    float: left;
                                    width: 50%;
                                    padding-left: 18px;
                                    line-height:24px;
                                    font-size:14px;
                                    color:#8796b0;
                                }
                            }
                        }
                    }
                    .mount-parameter-wrap {
                        border-bottom: 1px solid #222;
                        background: #3e495b;
                        .mount-select-wrap {
                            padding: 20px 41px;
                            font-size: 14px;
                            color:#8796b0;
                            border-top: 1px solid #222;
                            .select-wrap {
                                display: inline-block;
                                position: relative;
                                width: 210px;
                                margin-left: 10px;
                                .select-btn {
                                    width: 100%;
                                    color:#8796b0;
                                    border: 1px solid #8796b0;
                                    background: #3e495b;
                                    .bs-caret {
                                        float: right;
                                    }
                                }
                                .select-menu {
                                    display: none;
                                    position: absolute;
                                    top: 100%;
                                    left: 0;
                                    z-index: 1011;
                                    width: 100%;
                                    padding: 0;
                                    color:#8796b0;
                                    border: 1px solid #8796b0;
                                    border-radius: 4px;
                                    background: #3e495b;
                                    li {
                                        list-style: none;
                                        padding: 6px 12px;
                                        cursor: pointer;
                                        &:hover {
                                            color: #3e495b;
                                            background: #8796b0;
                                        }
                                    }
                                }
                                .form-control {
                                    font-size: 14px;
                                    color:#8796b0;
                                    border-color: #8796b0;
                                    border-radius:2px;
                                    background:#3e495b;
                                }
                            }
                        }
                        .mount-parameter-list {
                            padding: 0;
                            li {
                                list-style: none;
                                float: left;
                                width: 50%;
                                line-height: 32px;
                                color:#afbdd1;
                                &:nth-child(2n-1) {
                                    padding-left: 40px;
                                }
                            }
                        } 
                    }
                    .mount-control-area {
                        background: #3e495b;
                        .mount-control-left {
                            float: left;
                            width: 197px;
                            border-right: 1px solid #222;
                            .control-model {
                                margin: 6px;
                                span {
                                    display: inline-block;
                                    padding: 6px 16px;
                                    color:#afbdd1;
                                    cursor: pointer;
                                    background-image:linear-gradient(0deg, rgba(0,136,255,0.05) 0%, rgba(255,255,255,0.00) 97%);
                                    &.active {
                                        color: #fff;
                                        background:#64b9fc;
                                        box-shadow:inset 0 -2px 3px 0 rgba(0,0,0,0.15);
                                    }
                                }
                            }
                            .control-direction {
                                position: relative;
                                width:86px;
                                height:86px;
                                margin: 48px 55px;
                                border-radius:100%;
                                background:#626f86;
                                box-shadow:inset 0 0 8px 0 rgba(0,0,0,0.15);
                                .direction-up,.direction-down,.direction-left,.direction-right {
                                    position: absolute;
                                    width: 42px;
                                    height: 42px;
                                    border-radius:100%;
                                    box-shadow:0 1px 4px 0 rgba(0,0,0,0.10), inset 0 -5px 5px 0 rgba(175,189,209,0.10);
                                }
                                .direction-up {
                                    top: -30px;
                                    left: 22px;
                                    background: #8796b0 url(../../assets/images/video/direction-up-no.png) no-repeat center;
                                }
                                .direction-down {
                                    bottom: -30px;
                                    left: 22px;
                                    background: #8796b0 url(../../assets/images/video/direction-down-no.png) no-repeat center;
                                }
                                .direction-left {
                                    top: 22px;
                                    left: -30px;
                                    background: #8796b0 url(../../assets/images/video/direction-left-no.png) no-repeat center;
                                }
                                .direction-right {
                                    top: 22px;
                                    right: -30px;
                                    background: #8796b0 url(../../assets/images/video/direction-right-no.png) no-repeat center;
                                }
                            }
                        }
                        .mount-control-right {
                            float: right;
                            width: 183px;
                            color:#afbdd1;
                            .control-zoom {
                                border-bottom: 1px solid #222;
                                .control-zoom-title {
                                    float: left;
                                    width: 100%;
                                    padding-top: 15px;
                                    text-align: center;
                                }
                                .zoom-in,.zoom-out {
                                    float: left;
                                    width: 42px;
                                    margin: 8px 24px 14px;  
                                    text-align: center;
                                }
                                .zoom-in-icon,.zoom-out-icon {
                                    display: inline-block;
                                    width: 42px;
                                    height: 32px;
                                    cursor: pointer;
                                }
                                .zoom-in-icon {
                                    background: url(../../assets/images/video/zoom-in-no.png) no-repeat top center;   
                                    background-size: contain;
                                }
                                .zoom-out-icon {
                                    background: url(../../assets/images/video/zoom-out-no.png) no-repeat top center;  
                                    background-size: contain;
                                }  
                            }
                            .control-camera {
                                .camera-photo,.camera-video {
                                    float: left;
                                    width: 42px;
                                    margin: 24px;  
                                    text-align: center;
                                }
                                .camera-photo-icon,.camera-video-icon {
                                    display: inline-block;
                                    width: 42px;
                                    height: 32px;
                                    cursor: pointer;
                                }
                                .camera-photo-icon {
                                    background: url(../../assets/images/video/camera-photo-no.png) no-repeat top center;   
                                    background-size: contain;
                                }
                                .camera-video-icon {
                                    background: url(../../assets/images/video/camera-video-no.png) no-repeat top center;  
                                    background-size: contain;
                                }  
                            }
                        }
                    }
                } 
            } 
        }

    }
    .video-area {
        display: none;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 1011;
        width: 40%;
        height: 40%;
        border-radius: 4px;
        transform: translateY(-46px);
        .video-wrap {
            display: none;
            float: left;
            position: relative;
            width: 100%;
            height: 100%;
            border: 2px solid #afbdd1;
            background: #576379;
            .video-name-wrap {
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1020;
                padding: 3px 6px 3px 6px;
                background: rgba(175, 189, 209, 0.8);
                border-bottom-right-radius: 10px; 
                .video-name {
                    font-size:16px;
                    color:#4c6072;
                }
                .close-icon {
                    display: inline-block;
                    width: 24px;
                    height: 24px;
                    vertical-align: top;
                    background: url(../../assets/images/video/close-icon2.png) no-repeat center;
                    background-size: contain;
                    cursor: pointer;
                }
            }
            .video-js {
                width: 100%;
                height: 100%;
            }
        }
    }
}

</style>
